<template>
	<view class="message-wrap">
		<Tabs :TabList="tabList" :currentTab="checkedTab" @tabs="tabsChange" :lineWidth="160">
			<TabPane>
				<view v-if="type===1">
					<view class="item bg-white" v-for="(item, index) in messageList" :key="index">
						<view class="header flex-x-between">
							<view class="left">
								<view class="title bold">
									<view class="msg-icon inline-block text-center"><text class="iconfontPT iconcheliang"></text></view>
									{{item.title}}
								</view>
							</view>
							<view class="right">
								<text class="title">{{item.time}}</text>
							</view>
						</view>
						<view class="content flex-x-start">
							<image :src="avatarSrc(item.title,item.img)"  class="avatar"></image>
							<view class="info">
								<view class="name">
									{{item.content}}
								</view>
								<view class="amount theme">
									￥{{item.price}}
								</view>
							</view>
						</view>
						<view class="footer flex-x-start">
							<view class="explain">
								<text class="msg">系统消息：</text>
								{{item.title}}已生效
							</view>
						</view>
					</view>
					<no-data v-if="!messageList.length" />
				</view>
			</TabPane>
			<TabPane>
				<view v-if="type===3">
					<view class="item bg-white" v-for="(item, index) in messageList" :key="index">
						<view class="header flex-x-between">
							<view class="left">
								<view class="title bold">
									<view class="msg-icon inline-block text-center"><text class="iconfontPT iconhuodong"></text></view>
									{{item.title}}
								</view>
							</view>
							<view class="right">
								<text class="title">{{item.date}}</text>
							</view>
						</view>
						<view class="content flex-x-start">
							<image :src="`${host}/${item.img}`" class="avatar"></image>
							<view class="info">
								<view class="name">
									{{item.title}}
								</view>
								<view class="amount theme">
									￥{{item.price}}
								</view>
							</view>
						</view>
						<view class="footer flex-x-start">
							<view class="explain">
								<text class="msg">系统消息：</text>
								{{item.content}}
							</view>
						</view>
					</view>
					<no-data v-if="!messageList.length" />
				</view>
			</TabPane>
			<TabPane>
				<view class="life-circle-wrap" v-if="type===4">
					<view class="item bg-white" v-for="(item, index) in messageList" :key="index">
						<view hover-class="none" class="add" @click="handleReplyDetail(item.cid, item.pid, item.puid, item.name, item.content)">
							<view class="header flex-x-start">
								<view class="avatar">
									<image :src="item.portrait" class="avatar"></image>
								</view>
								<view class="info">
									<text class="name block">{{item.name}}</text>
									<text class="date">{{item.time}}</text>
								</view>
							</view>
							<view class="reply-wrap">
								<rich-text class="block" :nodes="item.content"></rich-text>
							</view>
							<view class="content flex-x-start">
								<image v-if="item.circle[0].img" :src="`${host}/${item.circle[0].img}`" class="img" mode="aspectFill"></image>
								<view class="info-wrap text-overflow" :style="{'margin-left': !item.circle[0].img ? '30rpx' : '0rpx', 'width': item.circle[0].img ? '520rpx' : '100%'}">
									<text class="name theme">{{item.circle[0].name}}:</text>
									{{item.circle[0].content}}
								</view>
							</view>
						</view>
					</view>
					<no-data v-if="!messageList.length" />
				</view>
			</TabPane>
			<TabPane>
				<view class="evaluate-wrap" v-if="type===5">
					<view class="item bg-white" v-for="(item, index) in messageList" :key="index">
						<view class="header flex-x-between">
							<view class="left flex-x-start">
								<image :src="item.portrait" class="avatar"></image>
								<view class="info">
									<text class="block">{{item.name}}</text>
									<text class="block evaluate">
										<text style="margin-right: 20rpx;">评分</text>
										<text :class="[`iconfontPT star ${ item1 < item.score ? 'iconshoucang-yixuanzhong' : 'iconshoucang-weixuanzhong' }`]"
										 v-for="item1 in 5" :key="item1"></text>
									</text>
								</view>
							</view>
							<view class="right">
								{{item.time}}
							</view>
						</view>
						<view class="content clear">
							<view>
								{{item.content}}
							</view>
							<image @click="$imgPreview(item1, index1, host, item.img)" v-for="(item1, index1) in item.img" :key="index1"
							 :src="`${host}/${item1}`" class="img pull-left" mode="aspectFill"></image>
						</view>
						<view class="footer">
							<text class="msg">
								<text class="iconfontPT iconshangjiahuiying"></text>
								商家回应：</text>
							<text class="reply">{{item.hf_content}}</text>
						</view>
					</view>
					<no-data v-if="!messageList.length" />
				</view>
			</TabPane>
			<TabPane>
				<view v-if="type===6">
					<view class="item bg-white" v-for="(item, index) in messageList" :key="index">
						<view class="header flex-x-between">
							<view class="left">
								<view class="title bold">
									<view class="msg-icon inline-block text-center"><text class="iconfontPT iconzhaopin"></text></view>
									{{item.content}}
								</view>
							</view>
							<view class="right">
								<text class="title">{{item.time}}</text>
							</view>
						</view>
						<view class="content flex-x-start">
							<image :src="item.img" class="avatar"></image>
							<view class="info">
								<view class="name">
									{{item.title}}
								</view>
								<view class="amount theme">
									￥{{item.price}}
								</view>
							</view>
						</view>
						<view class="footer flex-x-start">
							<view class="explain">
								<text class="msg">系统消息：</text>
								您购买的{{item.content}}已生效
							</view>
						</view>
					</view>
					<no-data v-if="!messageList.length" />
				</view>
			</TabPane>
			<TabPane>
				<view v-if="type===7">
					<view class="item bg-white" v-for="(item, index) in messageList" :key="index">
						<view class="header flex-x-between">
							<view class="left">
								<view class="title bold">
									<view class="msg-icon inline-block text-center"><text class="iconfontPT iconmendian"></text></view>
									{{item.title}}
								</view>
							</view>
							<view class="right">
								<text class="title">{{item.time}}</text>
							</view>
						</view>
						<view class="content flex-x-start">
							<image :src="`${host}/${item.img}`" class="avatar"></image>
							<view class="info">
								<view class="name">
									{{item.content}}
								</view>
								<view class="amount theme">
									￥{{item.price}}
								</view>
							</view>
						</view>
						<view class="footer flex-x-start">
							<view class="explain">
								<text class="msg">系统消息：</text>
								您购买的平台推荐服务已成功
							</view>
						</view>
					</view>
					<no-data v-if="!messageList.length" />
				</view>
			</TabPane>
		</Tabs>
	</view>
</template>

<script>
	import Tabs from '../../components/public/tabs.vue'
	import TabPane from '../../components/public/tabPane.vue'
	import {
		getMyMessage
	} from '../../../apis/personal/index.js'

	import {
		getMessageCount
	} from '../../../apis/public/index.js'

	export default {
		data() {
			return {
				temp: [{
					avatar: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqz75YPicwssJWD4eiapuXf5FcVh2qjqkib8HIYXs9UmzqEctNb0dhbiaUnbMmHXJNbKicUOdpLT20cvsQ/132',
					name: '曹大脸',
					score: '4.5',
					time: '2018.12.08',
					content: '一天中，太阳会升起，同时还会落下。人生也一样，有白天和',
					img: [
						'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqz75YPicwssJWD4eiapuXf5FcVh2qjqkib8HIYXs9UmzqEctNb0dhbiaUnbMmHXJNbKicUOdpLT20cvsQ/132'
					],
					reply: '感谢您的好评，感谢您的好评，感谢您的好评，感谢您的好评，感谢您的好评，感谢您的好评，感谢您的好评，感谢您的好评'
				}],
				page: 1,
				messageList: [],
				checkedTab: 0,
				tabList: [{
					title: '车辆',
					state: 1,
					message: 0
				}, {
					title: '组局',
					state: 3,
					message: 0
				}, {
					title: '圈聊',
					state: 4,
					message: 0
				}, {
					title: '评价',
					state: 5,
					message: 0
				}, {
					title: '招聘',
					state: 6,
					message: 0
				}, {
					title: '门店',
					state: 7,
					message: 0
				}],
			}
		},
		computed: {
			avatarSrc(title,img) {
				return (title, img) => {
					return (title == '新车服务' ? this.$baseHost.car : this.$baseHost.qiniuHost) + '/' + img;
				};
			},
			host() {
				return this.$baseHost.car
			},
			type() {
				let type = 0
				switch (this.checkedTab) {
					case 0:
						type = 1
						break;
					case 1:
						type = 3
						break;
					case 2:
						type = 4
						break;
					case 3:
						type = 5
						break;
					case 4:
						type = 6
						break;
					case 5:
						type = 7
						break;
				}
				return type
			},
		},
		components: {
			Tabs,
			TabPane,
		},
		onShow() {
			this.getMessageCount()
			this.getMessageList()
		},
		methods: {
			handleReplyDetail(cid, pid, puid, name, content) {
				const callObject = {
					name,
					content
				}
				console.log(pid, cid, puid)
				uni.setStorageSync('callObject', callObject)
				uni.navigateTo({
					url: `/pages/life-circle/comment/index?cid=${cid}&m_pid=${pid}`
				})
			},
			getMessageCount() {
				getMessageCount().then(res => {
					this.tabList.forEach((item, i) => {
						item.message = res.data[i] ? res.data : 0
					})
				})
			},
			getMessageList() {
				let params = {
					page: this.page,
					type: this.type
				}
				this.$loading.show()
				getMyMessage(params).then(res => {
					if (+res.code === 200) {
						this.messageList = res.data;
						this.$loading.hide();
						this.tabList[0].massage && (this.tabList[0].massage = 0)
						this.type == 4 && (this.messageList.forEach(item => {
							item.circle[0].img = item.circle[0].img.split(',')[0]
						}))
					}
				})
			},
			tabsChange(index) {
				this.checkedTab = index
				this.tabList.forEach((item, i) => {
					index == i && (item.message = 0)
				})
				this.getMessageList()
			},
		}
	}
</script>

<style lang="less">
	.message-wrap {
		background: #f8f8f8;
		height: 100vh;

		.have-message {
			&::after {
				position: absolute;
				right: 40rpx;
				top: 29rpx;
				content: '';
				width: 15rpx;
				border-radius: 100%;
				height: 15rpx;
				background: #E41805;
			}
		}

		.msg-icon {
			width: 36rpx;
			height: 36rpx;
			background: #E41805;
			border-radius: 100%;
			text-align: center;
			line-height: 30rpx;
			margin-right: 15rpx;

			.iconfontPT {
				color: #ffffff;
				font-size: 20rpx;
			}
		}

		.item {
			margin: 35rpx 0;
			padding: 30rpx;

			.header {
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid rgba(204, 204, 204, .5);
				margin-bottom: 30rpx;
			}

			.content {
				font-size: 28rpx;
				padding-bottom: 20rpx;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}
			}
		}

		.life-circle-wrap {
			padding-bottom: 30rpx;

			.item {
				.header {
					border-bottom: none;
					margin-bottom: 0;
					padding-bottom: 0;

					.avatar {
						border-radius: 100%;
						width: 80rpx;
						height: 80rpx;
						margin-right: 30rpx;
					}
				}

				.reply-wrap {
					margin: 25rpx 0;
				}

				.content {
					background: #f8f8f8;
					height: 144rpx;
					padding-bottom: 0;

					.name {
						margin-right: 20rpx;
					}

					.img {
						margin-right: 20rpx;
						height: 144rpx;
						width: 144rpx;
					}
				}
			}
		}

		.evaluate-wrap {
			.header {
				border-bottom: none;
				margin-bottom: 0;

				.left {
					.avatar {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
					}

					.info {
						font-size: 26rpx;
						margin-left: 20rpx;

						.evaluate {
							color: #999999;
							font-size: 24rpx;

							.star {
								font-size: 24rpx;
								margin-right: 8rpx;

								&.iconshoucang-yixuanzhong {
									color: #FF9933;
								}
							}
						}
					}
				}

				.right {
					font-size: 24rpx;
					color: #999999;
					margin-top: -40rpx;

				}
			}

			.content {
				margin-left: 95rpx;

				.img {
					width: 350rpx;
					height: 400rpx;
					border-radius: 5rpx;
					margin-top: 20rpx;
				}
			}

			.footer {
				margin-left: 95rpx;

				.iconfontPT {
					color: #FAAB20;
					margin-right: 20rpx;
					font-size: 26rpx;
				}

				.reply {
					line-height: 40rpx;
				}
			}
		}

		.footer {
			font-size: 26rpx;
			padding-top: 20rpx;

			.msg {
				color: #999999;
			}
		}
	}
</style>
